<template>
  <div class="tab">
      <common info="tab调用" ></common>
      <!-- 导航 -->
      <!-- <Item v-for="v in bar" :key='v.txt' :who='who' :setopt="v" @dian='getV'  />
       -->
       <div class="it" v-for="v in bar" :key='v.txt' @click="tab(v)">
            <div class="img">
            <img class="imgs" :src="v.txt==who?v.iconde:v.iconac" alt="">
            <!-- <img class='imgs' :src="src" alt=""> -->
            <!-- 转成流 base64格式 -->
            </div>
            <div class="txt">
                {{v.txt}}
            </div>
       </div>
  </div>
</template>

<script>
import Item from "./Item.vue"
//const src=require("../assets/img/1.png")
import src from "../assets/img/1.png"
import Common from '../components/Common.vue'
// console.log(src)
export default {
    data () {
        return {
            bar:[
                {txt:'微信',iconac:require("../assets/img/1.png"),iconde:require("../assets/img/2.png")},
                {txt:'通讯录',iconac:"../assets/img/3.png",iconde:"../assets/img/4.png"},
                {txt:'发现',iconac:"../assets/img/5.png",iconde:"../assets/img/6.png"},
                {txt:'我',iconac:"../assets/img/7.png",iconde:"../assets/img/8.png"},
            ],
            who:"微信",// 默认微信高亮
            src:require("../assets/img/1.png")
        }
    },
   components:{
       Item,
      Common
   },
   methods:{
       tab(v){
        //    console.log(v)
        this.who=v.txt
       }
   }
}
</script>

<style>
  .tab{
      width: 100%;
      height: 50px;
      position: fixed;
      bottom: 0;
      left: 0;
      border-top: 1px solid gainsboro;
      display: flex;
      justify-content: space-around;
  }

  .it{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.img{
    height: 25px;
    width: 25px;
}
  .img .imgs{
    width: 100%;
  }
</style>